<template>
  <el-dialog
    custom-class="main"
    :title="title"
    @close="close"
    :visible.sync="partVisible"
  >
    <!-- 表单 -->
    <el-form :model="form" :rules="rules" label-position="right" ref="form">
      <el-form-item label="零件名称" prop="name" :label-width="formWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        label="零件规格"
        :rules="[{ required: true, trigger: 'change' }]"
        :label-width="formWidth"
      >
        <el-col :span="9">
          <el-form-item prop="specification_pre">
            <el-input
              v-model.number="form.specification_pre"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3" style="text-align: center">×</el-col>
        <el-col :span="9">
          <el-form-item prop="specification_next">
            <el-input
              v-model.number="form.specification_next"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item
        label="零件数量"
        v-if="this.fun == 'add'"
        prop="number"
        :label-width="formWidth"
      >
        <el-input
          v-model.number="form.number"
          @blur="checkSurplus"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="零件单价" prop="price" :label-width="formWidth">
        <el-input v-model.number="form.price" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancle">取 消</el-button>
      <el-button type="primary" @click="confirm('form')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
let partApi = require("@/api/part");

export default {
  props: {
    /* 功能：添加或修改 */
    fun: {
      type: String,
      default: "add",
    },
    /* 零件id */
    partId: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      partVisible: true,
      title: "",
      /* 零件信息 */
      form: {
        name: "",
        specification_pre: "",
        specification_next: "",
        number: "",
        used: "",
        price: "",
      },
      /* 信息填写规则 */
      rules: {
        name: [{ required: true, message: "请输入零件名称", trigger: "blur" }],
        specification_pre: [
          { required: true, message: "规格", trigger: "change" },
        ],
        specification_next: [
          { required: true, message: "规格", trigger: "change" },
        ],
        number: [
          { required: true, message: "零件数量不得为空", trigger: "change" },
        ],
        price: [
          { required: true, message: "请输入零件价格", trigger: "change" },
        ],
      },
      formWidth: "120px", //form宽度
      oldValue: {},
      innerVisible: false,
    };
  },
  methods: {
    /* 初始化 */
    init(fun) {
      /* 进入对话框时判断功能，如果是"add"，则对应新增功能，否
       则对应"修改"功能,需要将id对应的信息填上*/
      if (fun == "add") {
        this.title = "新增零件";
        this.oldValue.name = "";
        this.oldValue.surplus = "";
        return;
      } else {
        this.title = "修改信息";
        //此处写根据id获取零件信息的逻辑
        this.getDataById(this.partId);
        return;
      }
    },
    /* 根据id获取初始化数据 */
    async getDataById(id) {
      let { material } = await partApi.getPartsDataById(id);
      let obj = { ...material };
      obj.specification_pre = obj.specification.split("*")[0];
      obj.specification_next = obj.specification.split("*")[1];
      this.form = obj;
      delete this.form.signId;
      delete this.form.number;
      delete this.form.surplus;
      delete this.form.used;
      this.oldValue = material;
    },
    /* 监测零件剩余量 */
    checkSurplus() {
      if (this.form.surplus > this.form.number) {
        this.rules.surplus[0].message = "剩余量数据不可高于总数量";
        return;
      }
    },
    /* 新增零件 */
    async addPart() {
      let s = this.form.specification_pre + "*" + this.form.specification_next;
      this.form.specification = s;
      delete this.form.specification_pre;
      delete this.form.specification_next;
      let res = await partApi.addPart(this.form);
    },
    /* 修改零件 */
    async editorPart() {
      let s = this.form.specification_pre + "*" + this.form.specification_next;
      this.form.specification = s;
      delete this.form.specification_pre;
      delete this.form.specification_next;
      /* 
        在调用编辑接口前做一层判断： 
          此时表单中零件名称与零件规格与初始值是否一致，
          如果不一致则需要判断此名称与规格的组合是否已在零件表中存在，
          若存在则拒绝调用接口并告知用户
      */
      if (
        this.oldValue.name == this.form.name &&
        this.oldValue.specification == this.form.specification
      ) {
        let res = await partApi.updatePartData(this.form);
        return true;
      } else {
        let result = await partApi.checkIsPart(this.form);
        let message = result.data.message;
        if (message) {
          this.$notify.error({
            title: "错误",
            message: `${message}，不允许提交`,
          });
          return false;
        }
        let res = await partApi.updatePartData(this.form);
        return true;
      }
    },
    /* 向父组件发送关闭请求 */
    close() {
      this.$emit("close", false);
    },
    /* 取消 */
    cancle() {
      this.close();
    },
    /* 确定 */
    confirm(formName) {
      this.$refs[formName].validate((valid) => {
        var res = true;
        if (valid) {
          if (this.fun == "add") {
            this.addPart();
          } else {
            res = this.editorPart();
          }
          res == true ? this.close() : "";
          return;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  created() {
    this.init(this.fun);
  },
};
</script>

<style>
.el-dialog {
  width: 35% !important;
}
.el-dialog__body {
  padding: 30px 13% 30px 10% !important;
}
</style>